<template>
  <div>  	
  	  <mt-field label="选择时间" placeholder="选择时间" v-model="time" v-validate="'required'" name="时间">
  	  	<button @click="openTimePicker">激活时间插件</button>
  	  </mt-field>
	
	  <mt-field label="选择日期" placeholder="请选择日期" v-model="date" v-validate="'required'" name="日期">
	  	<button @click="openDatePicker">激活日期插件</button>
	  </mt-field>
	  <mt-field label="选择日期时间" placeholder="请选择日期时间" v-model="datetime" v-validate="'required'" name="日期时间">
	  	<button @click="openDateTimePicker">激活日期时间插件</button>
	  </mt-field>
	  <mt-datetime-picker
	    ref="timePicker"
	    type="time"
	    hour-format="{value} 时"
	    minute-format="{value} 分"
	    v-model="timePickerValue"
		@confirm="handleConfirmTime"
	    >
	  </mt-datetime-picker>
	  <mt-datetime-picker
	    ref="datePicker"
	    type="date"
	    year-format="{value} 年"
	    month-format="{value} 月"
	    date-format="{value} 日"
	    v-model="datePickerValue"
		@confirm="handleConfirmDate"
		:startDate="startDate"
		:endDate="endDate"
	    >
	  </mt-datetime-picker>
	  <mt-datetime-picker
	    ref="datetimePicker"
	    type="datetime"
	    year-format="{value}年"
	    month-format="{value}月"
	    date-format="{value}日"
	    hour-format="{value}时"
	    minute-format="{value}分"
	    v-model="datePickerValue"
		@confirm="handleConfirmDatetime"
		:startDate="startDate"
		:endDate="endDate"
	    >
	  </mt-datetime-picker>
	  <div class="submit_btn" @click="submitTime">提交时间</div>
  </div>
</template>


<script>
	import moment from 'moment'
	import { DatetimePicker ,Field,Toast} from 'mint-ui'
	export default{
		components:{DatetimePicker,Field,Toast},
		data(){
			return{
				time:'',
				timePickerValue:'',
				date:'',
				datePickerValue:'',
				datetime:'',
				startDate: new Date('1998-01-01'),//日历插件可选时间的开始时间
				endDate:new Date('2099-12-31'),//日历插件可选时间的结束时间   
			}
		},
		methods:{
			openTimePicker(){
				this.$refs.timePicker.open();
			},

			handleConfirmTime(data){
				this.time = data;
			},
			openDatePicker(){
				this.$refs.datePicker.open();
			},
			handleConfirmDate(data){
				//通过 moment处理时间格式 ,快速拿到想要的时间格式
				let date = moment(data).format('YYYY/MM/DD');

				this.date = date;
			},
			openDateTimePicker(){
				this.$refs.datetimePicker.open();
			},
			handleConfirmDatetime(data){
				let datetime = moment(data).format('YYYY/MM/DD hh:mm:ss');
				this.datetime = datetime;
			},
			submitTime(){
				this.$validator.validateAll().then((result) => { 
					if(result){
						Toast('提交成功')
					}else{
						Toast(this.errors.items[0].msg)
					}
				})
			}
		},
		mounted(){
			
		}
	}
	
</script>

<style lang="scss" scoped>
	.picker-item{
		padding:0;
	}
	.submit_btn{margin:10px auto;text-align: center;width:95%;height:30px;line-height:30px;background-color:#26a2ff;color:#fff;font-size:16px;border-radius:5px; }
</style>